import React from 'react';
import { connect } from 'dva';
import { login } from '../services/user';

import { Form, Input, Button, Checkbox, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';

// 登录表单组件
const Login = (props) => {
    const onFinish = async (values) => {
        const { username, password } = values;
        const res = await login({ username, password });
        //重定向到用户最开始访问的页面
        const { from } = props.history.location.state || { from: { pathname: '/' } }
        if (res.status === 200) {
            props.history.push(from);
        } else {
            message.error('用户名或密码错误!');
        }
    };

    return (
        <Form
            name="normal_login"
            className="login-form"
            initialValues={{
                remember: true,
            }}
            onFinish={onFinish}
        >
            <Form.Item
                name="username"
                rules={[
                    {
                        required: true,
                        message: '请输入登录账号!',
                    },
                ]}
            >
                <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="登录账号" />
            </Form.Item>
            <Form.Item
                name="password"
                rules={[
                    {
                        required: true,
                        message: '请输入登录密码!',
                    },
                ]}
            >
                <Input
                    prefix={<LockOutlined className="site-form-item-icon" />}
                    type="password"
                    placeholder="登录密码"
                />
            </Form.Item>
            <Form.Item>
                <Form.Item name="remember" valuePropName="checked" noStyle>
                    <Checkbox>记住账号</Checkbox>
                </Form.Item>

                {/* <a className="login-form-forgot" href="#">忘记密码</a> */}
            </Form.Item>

            <Form.Item>
                <Button size="large" block type="primary" htmlType="submit" className="login-form-button">
                    立即登录
                </Button>
            </Form.Item>
        </Form>
    );
};

const imgPath = require('../assets/img/login-bg-2.jpg');
const bgStyle = {
    position: 'absolute',
    top: 0,
    left: 0,
    height: '100vh',
    width: '100vw',
    background: 'url(' + imgPath + ')',
    backgroundSize: 'cover',
    backgroundPosition: 'center center',
    zIndex: -1
}

const formStyle = {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%,-50%)',
    width: 400,
    padding: 50,
    background: 'rgba(255,255,255,.8)',
    borderRadius: 10
}

class LoginPage extends React.Component {
    render() {
        return (
            <div style={{ posotion: 'relative' }}>
                <div style={formStyle}>
                    <Login {...this.props}></Login>
                </div>
                <div style={bgStyle}></div>
            </div>
        )
    }
}

LoginPage.propTypes = {

}

export default connect()(LoginPage);